<template>
	<view>
		<view class="search_box">
			<view class="">
				热门搜索
			</view>
			<view class="search_main">
				<view class="search_item" v-for="(item,index) in hotList" :key='index'>
					{{item }}
				</view>

			</view>
			<view class="history_box">
				<view class="history_top">
					<view class="history_left">
						历史记录
					</view>
					<view class="history_right">
						清空
					</view>
				</view>
				<!-- 历史 -->
				<view class="search_main">
					<view class="search_item" v-for="(item,index) in hotList" :key='index'>
						{{item }}
					</view>
				</view>

			</view>
		</view>4
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hotList: ['Java', 'SpringBoot', 'SpringCloud', 'Python', 'Vue', 'React'],
				params:null,
				content:null //搜索的内容
			}
		},
		methods: {
			doSearch(){
				uni.showLoading({
					
				})
			}
		},
		onLoad(option) {
			// #ifdef APP-PLUS
			 currentWebview = this.$mp.page.$getAppWebview()
			 // #endif
			 if(option.params){
				 this.params=JSON.parse(option.params)
				 // 调用搜索方法
			 }else{
				 // #ifdef APP-PLUS
				  currentWebview.setTitleNViewSearchInputFocus(true)
				  // #endif
			 }
			
		},
		onNavigationBarButtonTap(e) {
			// 取消按钮
			if (e.index === 0) {
				uni.navigateBack()
			}
		},
		// 原生搜索框，输入内容实时变化事件
		 onNavigationBarSearchInputChanged(e) {
		 this.content = e.text
		 },
		 onNavigationBarSearchInputConfirmed(e) {
		  // console.log('用户点击软键盘上的“搜索”按钮', e.text)
		  // #ifdef APP-PLUS
		  // 失去焦点，收起键盘（有时不会收起）
		  currentWebview.setTitleNViewSearchInputFocus(false)
		  // #endif
		  this.doSearch()
		  },
	}
</script>

<style>
	.search_box {
		width: 100%;
		padding: 10px 10px;

	}

	.search_main {
		display: flex;
		flex-wrap: wrap;
	}

	.search_item {
		border: 1px solid #999;
		font-size: 13px;
		color: #999;
		padding: 5px 5px;
		border-radius: 5px;
		margin-right: 10px;
		margin-top: 10px;
	}

	.history_box {
		margin-top: 50px;
	}

	.history_top {
		display: flex;
		justify-content: space-between;
	}
</style>
